let rate = 1;
const checkHttps = (url) => {
  return url.substr(0, 7).toLowerCase() == "http://" ?
    url.replace("http://", "https://") :
    url;
};
let starimg = `<image class="star" src="https://ustatic.hudongmiao.com/joymew-assist/components/star.png"/>`;
let unstarimg = `<image class="star" src="https://ustatic.hudongmiao.com/joymew-assist/components/unstar.png"/>`;
let formatStar = (num) => {
  let star = num;
  let unstar = 5 - num;
  return `
  <view class="star-wrap">
    ${starimg.repeat(star)}
    ${unstarimg.repeat(unstar)}
  </view>    
  `;
};
// 高度 过高会报错
const renderShareTopCard = ({
  avator,
  emcee_name,
  xin
}) => {
  const style = {
    shareTopCard: {
      width: 341 * rate,
      height: 78 * rate,
      alignItems: "center",
      justifyContent: "flex-start",
      // backgroundColor: 'white',
      flexDirection: "row",
    },
    hostImg: {
      marginLeft: 22,
      width: 54 * rate,
      height: 54 * rate,
      borderRadius: 27 * rate,
    },
    hostWrap: {
      marginTop: 8,
      marginLeft: 11,
      width: 240,
      height: 54,
      flexGrow: 1,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      // backgroundColor: 'black'
    },
    hostname: {
      width: 240,
      height: 24,
      flexGrow: 1,
      fontSize: 16,
      color: "#fff",
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
    },
    argScore: {
      width: 240,
      height: 24,
      // backgroundColor: "white",
      flexDirection: "row",
      justifyContent: "flex-start",
      alignItems: "center",
    },
    score: {
      width: 66,
      height: 17,
      color: "#FBD56F",
      fontSize: 12,
    },
    starWrap: {
      width: 120,
      height: 17,
      // backgroundColor: "green",
      flexDirection: "row",
      justifyContent: "flex-start",
      alignItems: "center",
    },
    star: {
      marginLeft: 8,
      width: 14,
      height: 14,
    },
  };
  if (!avator) {
    return {
      style,
    };
  };
  const wxml = `
  <view class="share-top-card">
    <image class="hostImg" src="${avator}"></image>
    <view class="host-wrap"> 
      <text class="hostname" >${emcee_name} </text>
      <view class="arg-score">
        <text class="score">评分：${xin}分 </text>
        ${formatStar(xin)}
      </view>
    </view>
  </view>  

`;
  return {
    wxml,
    style,
  };
};

const renderTagsWrapStyle = {
  tagsWrap: {
    width: 341,
    height: 101,
    // backgroundColor:'black',
    alignItems: "flex-start",
    justifyContent: "flex-start",
    flexDirection: "row",
    flexWrap: "wrap",
    // paddingTop: 9,
    paddingLeft: 5,
  },
  tag: {
    width: 86,
    height: 28,
    marginTop: 9,
    marginLeft: 18,
    backgroundColor: "white",
    borderWidth: 2,
    borderRadius: 14,
    borderColor: "#DE2748",
  },
  label: {
    width: 86,
    height: 28,
    lineHeight: 28,
    fontSize: 11,
    textAlign: "center",
    color: "#DE2748",
  },
};

const renderTagsWrap = ({
  labelList
}) => {
  let tags = "";
  for (let i = 0; i < labelList.length; i++) {
    tags += `<view class="tag"  > <text class="label">${labelList[i].name}</text></view>`;
  }

  return `
  <view class="tags-wrap">
    ${tags}
  
  </view>
  
  `;
};
const renderCommentsWrapStyle = {
  commentCard: {
    marginTop: 13 * rate,

    width: 341 * rate,
    height: 372 * rate,
    backgroundColor: "#fff",
    flexGrow: 0,
    borderRadius: 6,
    alignItems: "center",
  },
  topTitle: {
    width: 341 * rate,
    height: 45 * rate,
    backgroundColor: "#fff",
    paddingLeft: 15,
    paddingBottom: 4,
    paddingTop: 16,
  },
  cTitle: {
    width: 36 * rate,
    height: 30 * rate,
    fontSize: 18 * rate,
    color: "#333",
  },
  commentList: {
    width: 320,
    height: 326,
    flexDirection: "column",
    justifyContent: "space-around",
    alignItems: "center",
  },
  commentItem: {
    width: 320,
    height: 101,
    backgroundColor: "#fff",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    // borderTopColor: 'red'
  },
  border: {
    width: 320,
    height: 1,
    borderWidth: 1,
    borderColor: "#eee",
  },
  sectorA: {
    width: 320,
    height: 57,
    // backgroundColor: 'red',
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  sectorB: {
    width: 320,
    height: 44,
    backgroundColor: "#fff",
  },
  sectorBContent: {
    width: 320,
    height: 48,
    fontSize: 16,
    color: "#333333",
  },
  userHeadimg: {
    marginLeft: 4,
    width: 34,
    height: 34,
    borderRadius: 17,
  },
  descWrap: {
    marginLeft: 8,

    width: 158,
    height: 40,
    // backgroundColor: 'green'
  },
  sastar: {
    width: 120,
    height: 17,
    marginTop: -30,
  },
  descName: {
    width: 158,
    height: 18,
  },
  descDate: {
    width: 158,
    height: 18,
  },
  descNameText: {
    width: 158,
    height: 23,
    color: "#666666",
    fontSize: 13,
  },
  descDateText: {
    width: 158,
    height: 18,
    color: "#999999",
    fontSize: 12,
  },
};

const renderCommentsWrap = ({
  comments
}) => {
  let len = comments.length > 3 ? 3 : comments.length;
  let commentlist = "";
  for (let i = 0; i < len; i++) {
    ;
    commentlist += `
    <view class="comment-item"> 
      <view class="border"></view>
      <view class="sector-a">
        <image class="user-headimg" src="${checkHttps(comments[i].avatar)}"></image>
        <view class="desc-wrap">
          <view class="desc-name">
            <text class="desc-name-text"> ${comments[i].nickname}</text>
          </view>
          <view class="desc-date">
            <text class="desc-date-text"> ${comments[i].time}</text>
          </view>
        </view>
        <view class="sastar"> ${formatStar(comments[i].satisfaction)} </view>
        
      </view>
      <view class="sector-b">
        <text class="sector-b-content">
        ${comments[i].content}
        </text>
      </view>
    </view>
    `;
  }
  return `
  <view class="comment-card" >
    <view class="top-title"> <text class="c-title">评价</text></view>
    <view class="comment-list">
      ${commentlist}
    </view>
  </view>`;
};
const getData = (obj) => {

  obj.avator = checkHttps(obj.avator);
  obj.qrcode = checkHttps(obj.qrcode);

  let qrcode = obj.qrcode;
  return `
  <view class="container comment" >
    <view class="share-card">
      <view class="scene-card">
      ${renderShareTopCard(obj).wxml}
      <text class="theme"> ${obj.theme}</text>
      <view class="date-wrap">
        <text class="date">${obj.using_date}</text>
        <text class="pcu">${obj.pcu}位嘉宾</text>
      </view>
      
      </view>
      ${renderTagsWrap(obj)}
    </view>

    ${renderCommentsWrap(obj)}


    <image class="qrcode" src="${qrcode}"></image>

    <text class="scan-tips">
      长按图片查看更多精彩的评论
    </text>
  </view>
  
  `;
};

const style = {
  comment: {
    width: 375 * rate,
    height: 834 * rate,
    backgroundColor: "#edeeee",
    // scale: 0.5,
    alignItems: "center",
    justifyContent: "flex-start",
    flexDirection: "column",
  },
  shareCard: {
    marginTop: 18 * rate,
    width: 341 * rate,
    height: 243 * rate,
    backgroundColor: "#fff",
    flexGrow: 0,
    borderRadius: 6 * rate,
    flexDirection: "column",
  },
  sceneCard: {
    width: 341 * rate,
    height: 141 * rate,
    backgroundColor: "#DC2244",
    borderRadius: 6 * rate,
    alignItems: "center",
    justifyContent: "flex-start",
    flexDirection: "column",
  },

  shareHost: {
    width: 254,
    height: 22,
    color: "#fff",
    flexGrow: 1,
    fontSize: 16,
  },

  qrcode: {
    marginTop: 11 * rate,
    width: 127 * rate,
    height: 127 * rate,
  },
  scanTips: {
    marginTop: 10 * rate,
    width: 143 * rate,
    height: 16 * rate,
    fontSize: 11 * rate,
    color: "#999999",
    textAlign: "center",
  },
  ...renderShareTopCard({}).style,
  theme: {
    width: 320,
    marginLeft: 22,
    height: 30,
    lineHeight: 30,
    flexGrow: 1,
    color: "white",
    // backgroundColor: 'black',
    fontSize: 14,
  },
  dateWrap: {
    marginLeft: 22,
    width: 320,
    height: 30,
    flexDirection: "row",
  },
  date: {
    width: 100,
    height: 30,
    fontSize: 11,
    lineHeight: 30,
    color: "rgba(255,255,255,0.9)",
  },
  pcu: {
    marginRight: 31,
    width: 100,
    fontSize: 11,
    height: 30,
    lineHeight: 30,
    color: "#fff",
  },
  ...renderTagsWrapStyle,
  ...renderCommentsWrapStyle,
};

module.exports = {
  getData,
  style,
};